<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style>

	</style>
		<div id="root">
			<div  
			:style="styleObj"
			@click="handleDivClick"
			>hello world</div>
			<div  
			:style="[styleObj,{fontSize:'20px'}]"
			@click="handleDivClick"
			>hello world</div>			
		</div>


	<script type="text/javascript">
		var app=new Vue({
			el:'#root',
			data:{
				styleObj:{
					color:"black"
				},
				
			},
			methods: {
				handleDivClick:function(){
					// if(this.activated==="activated"){
					// 	this.activated="";
					// }else{
					// 	this.activated="activated";
					// }
					this.styleObj.color=this.styleObj.color==="black"?
					"red":"black"
				}
			},

			// computed: {
			// 	// fullName:function(){
			// 	// 	console.log("计算了一次")
			// 	// 	return this.firstName+" "+this.lastName
			// 	// },
			// 	fullName:{
			// 		get:function(){
			// 			return this.firstName+" "+this.lastName
			// 		},
			// 		set:function(value){
			// 			var arr=value.split(" ");
			// 			this.firstName=arr[0];
			// 			this.lastName=arr[1];
			// 			console.log(value);
			// 		}
			// 	}
			// },

			// beforeCreate:function() {
			// 	console.log("beforeCreate")
			// },
			// created() {
			// 	console.log("created");
			// },
			// beforeMount() {
			// 	console.log(this.$el);
			// 	console.log("beforeMount");
			// },
			// mounted() {
			// 	console.log(this.$el);
			// 	console.log("mounted");
			// },


			// // when vm.$destroy() is called
			// beforeDestroy() {
			// 	console.log("beforeDestroy");
			// },
			// destroyed() {
			// 	console.log("destroyed");
			// },	

			// // when data changes
			// beforeUpdate() {
			// 	console.log("beforeUpdate");
			// },
			// updated() {
			// 	console.log("updated");
			// },


		})
		// setTimeout(function(){
		// 	app.$data.content='bye'
		// },2000)
	</script>
	</body>
</html>
